<script lang="ts" setup>
  import { ref } from 'vue'
  import { VueDraggable } from 'vue-draggable-plus'
  const list = ref([
    {
      name: 'aaaaaaa',
      id: 1
    },
    {
      name: 'bbbbbbb',
      id: 2
    },
    {
      name: 'cccc',
      id: 3
    },
    {
      name: 'ddddd',
      id: 4
    },
    {
      name: '5555',
      id: 5
    },
    {
      name: '66666',
      id: 6
    }
  ])

  // 右键
  let show = ref(false)
  let optionsComponent = {
    zIndex: 3,
    minWidth: 100,
    maxWidth: 200,
    x: 500,
    y: 200
  }

  function onButtonClick(e) {
    console.log(e)
    console.log(list.value)
    console.log(window)
    //显示组件菜单
    show.value = true
    optionsComponent.x = e.x
    optionsComponent.y = e.y
  }
</script>

<template>
  <div>
    <div>
      <VueDraggable
        style="border: 1px solid red; width: 600px; height: 300px; display: flex; flex-wrap: wrap"
        ref="el"
        v-model="list"
      >
        <div
          style="flex: 33%; border: 1px solid red; cursor: move"
          v-for="item in list"
          :key="item.id"
          @contextmenu.prevent="onButtonClick"
        >
          {{ item.name }}
        </div>
      </VueDraggable>
    </div>
    <div>
      <el-button @contextmenu.prevent="onButtonClick"> 右键 </el-button>
      <context-menu v-model:show="show" :options="optionsComponent">
        <context-menu-item label="Simple item" />
        <context-menu-item label="Simple item" />
        <context-menu-item label="Simple item" />
        <context-menu-item label="Simple item" />
      </context-menu>
    </div>

    <div class="box">
      <div class="item"></div>
    </div>
  </div>
</template>

<style>
  .box {
    position: relative;
    width:100px;
    height: 50px;
    top: 100px;
    margin: 0 auto;
    border: 1px solid #5384ff;
    display: flex;
    align-items: center;
  }
  .box::after {

  }
  .item{
    width: 100%;
    height: 100%;
    border-image-source:radial-gradient(51% 55%, transparent 0, transparent 100%, #1cd8ff 100%);
    border-image-slice:.5;
    border-width: 5px;
    border-style: solid;
    border-image-outset: 10px 15px;
  }
</style>